<template>
    <!-- 主体内容 -->
    <div class='main'>
        <div class="login">
            <div class="logo"><img src="../assets/logo.png" alt=""></div>
            <el-form :model="user" class="user_form" :rules="userRules" ref="userFormRef">
                <el-form-item prop="name">
                    <el-input v-model="user.name" placeholder="用户名" :prefix-icon="User" />
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input v-model="user.pwd" placeholder="密码" show-password :prefix-icon="Lock" />
                </el-form-item>
                <el-form-item class="btns">
                    <el-button type="primary" @click="submitForm(userFormRef)">登录</el-button>
                    <el-button type="success" @click="resetForm(userFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import api from '@/api/index.js'
import { useRouter } from 'vue-router'
const user = reactive({
    name: '',
    pwd: ''
})
const userRules = reactive({
    name: [
        { required: true, message: '账号错误', trigger: 'blur' },
        { min: 3, max: 10, message: '用户名长度3~10', trigger: 'blur' }
    ],
    pwd: [
        { required: true, message: '密码错误', trigger: 'blur' },
        { min: 6, max: 18, message: '密码长度6~18', trigger: 'blur' }
    ]
})
const router=useRouter()
const userFormRef = ref(null)
const resetForm = (userFormRef) => {
    userFormRef.resetFields()
}
const submitForm = (userFormRef) => {
    userFormRef.validate((valid) => {
        if (valid) {
            console.log('信息正确')
            api.login(user).then(res => {
                //根据结果处理
                if (res.data.status == 200) {
                    ElMessage({
                        message: res.data.msg,
                        type: 'success',
                    })
                    sessionStorage.setItem('token',res.data.data.token)
                    router.push('/')
                }
                else {
                    ElMessage({
                        message: res.data.msg,
                        type: 'warning',
                    })
                }
            })
        }
        else {
            console.log('提交错误!')
            return false
        }
    })
}
</script>

<style scoped>
.main {
    width: 100%;
    height: 100%;
    background-color: rgb(132, 235, 104);
    display: flex;
    justify-content: center;
    align-items: center;
}

.login {
    width: 750px;
    height: 475px;
    background-color: antiquewhite;
    border-radius: 15px;
}

.logo {
    width: 200px;
    border: 1px solid #eee;
    margin: 0 auto;
    margin-top: -75px;
    padding: 5px;
    border-radius: 15px;
    box-shadow: 0 0 10px #ddd;
}

img {
    width: 100%;
    height: 100%;
}

.user_form {
    padding-top: 75px;
    padding-right: 140px;
    padding-left: 140px;
    padding-bottom: 75px;
}

.btns {
    display: flex;
    justify-content: space-between;
}

.btns button {
    flex: 1;
}
</style>

